<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/png" sizes="16x16" href="./logo_64x64.ico">
    <title>出国留学语言水平测试卷-挑战版</title>
    <script src="exam/tailwindcss.min.js"></script>
    <script src="exam/exam.js"></script>
    <script src="exam/content.js"></script>
    <script src="exam/showCorrect.js"></script>
    <!-- 引入Font Awesome图标 -->
    <link rel="stylesheet" href="exam/fontawesome.css">
    <link rel="stylesheet" href="exam/pop.css">
    <link rel="stylesheet" href="exam/select.css">
    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3b82f6',
                        secondary: '#64748b',
                        accent: '#f97316',
                        neutral: '#f1f5f9',
                        success: '#10b981',
                        danger: '#ef4444',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                        serif: ['Georgia', 'serif'],
                    },
                },
            }
        }
    </script>

    <style type="text/tailwindcss">

        @layer utilities {
            .btn-primary {
                @apply bg-primary text-white px-6 py-2 rounded-md hover:bg-primary/90 transition-all duration-200 focus:ring-2 focus:ring-primary/50 focus:outline-none;
            }

            .btn-secondary {
                @apply bg-white text-gray-700 border border-gray-300 px-6 py-2 rounded-md hover:bg-gray-50 transition-all duration-200;
            }

            .section-title {
                @apply text-xl font-bold text-gray-800 mb-4 pb-2 border-b border-gray-200;
            }

            .play-button {
                @apply w-12 rounded-full bg-primary text-white flex items-center justify-center cursor-pointer
                shadow-lg hover:shadow-xl transition-all duration-300
                hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-primary/30;
            }

            .option-selected {
                @apply border-primary bg-primary/5 ring-1 ring-primary;
            }
        }

        h1, h2, h3, h4, h5, h6 {
            @apply text-center;
        }

        .indent-4 {
            display: inline-block;
            width: 4rem;
        }

        /* 内层容器：限制宽度并居中，使h标签整体居中显示 */
        .centered-container {
            max-width: 700px; /* 限制内容宽度 */
            margin-left: auto;
            margin-top: 1.0rem;
            margin-right: auto; /* 左右margin自动实现容器居中 */
        }

        /* 表格对齐样式 */
        .roman-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 1rem;
        }

        .roman-table td:first-child {
            font-weight: bold;
            width: 80px; /* 固定罗马数字列宽度 */
        }

        /* 子元素样式-居中 */
        .child-element {
            height: 40px;
            padding: 1rem;
            border-radius: 0.375rem;
            text-align: center;
        }

        /* 2. Grid 居中 */
        .grid-center {
            display: grid;
            place-items: center; /* 同时实现水平和垂直居中 */
        }
    </style>
</head>
<body class="bg-gray-50 font-sans text-gray-800">
<header class="bg-white shadow-sm sticky top-0 z-50">
    <div class="container mx-auto px-4 py-3 flex flex-col md:flex-row justify-between items-center">
        <div class="flex items-center">
            <a href="#" class="flex items-center">
                <img src="./img/exam-logo.png" alt="网站Logo" style="width: 300px;height: 80px"
                     class="h-10 w-full rounded-full object-cover">
                <span class="ml-3 text-xl font-bold text-gray-800"></span>
            </a>
        </div>

        <div class="flex items-center mb-3 md:mb-0">
            <h1 class="text-lg md:text-xl font-bold">出国留学语言水平测试卷-挑战版</h1>
        </div>

        <div class="flex items-center w-full md:w-auto justify-between">
            <div class="flex items-center mr-4">
                <i class="fa fa-clock-o text-accent mr-2"></i>
                <span id="timer" class="font-mono text-accent">40:00</span>
            </div>

            <button style="display: none" class="btn-primary rounded-btn flex items-center">
                <i class="fa fa-paper-plane mr-2"></i>
                <span>交卷</span>
            </button>

            <div id="submitBtn" class="popup-container">
                <div class="trigger bg-blue-500 text-white px-4 py-2 rounded-full">
                    <i class="fa fa-paper-plane mr-2"></i>
                    交卷
                </div>
            </div>

            <div class="popup-container-hidden ml-2" onclick='showCorrectAnswer(false)'>
                <div class="trigger bg-green-500 text-white px-4 py-2 rounded-full">
                    <i class="fa fa-book-atlas mr-2"></i>
                    检查
                </div>
                <div class="popup popup-bottom">
                    <h3 class="font-medium text-gray-800 mb-1">操作提示</h3>
                    <p class="text-sm text-gray-600">操作将检查已经完成的,对的将标识✅</p>
                </div>
            </div>

            <div class="popup-container-hidden ml-2" onclick='showCorrectAnswer(true)'>
                <div class="trigger bg-purple-500 text-white px-4 py-2 rounded-full">
                    <i class="fa fa-map mr-2"></i>
                    判卷
                </div>
                <div class="popup popup-bottom">
                    <h3 class="font-medium text-gray-800 mb-1">操作提示</h3>
                    <p class="text-sm text-gray-600">操作将检查已经完成的,标识 ✅ 和 ❌ </p>
                </div>
            </div>

            <div style="display: none" class="popup-container ml-2" onclick='test()'>
                <div class="trigger bg-purple-500 text-white px-4 py-2 rounded-full">
                    <i class="fa fa-map mr-2"></i>
                    临时
                </div>
            </div>
        </div>
    </div>
</header>

<main class="container mx-auto px-4 py-6">
    <!-- 试卷信息 -->
    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-5 mb-8">
        <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-4">
            <div>
                <p class="text-gray-600">考试时间：40分钟</p>
            </div>
            <div class="mt-4 md:mt-0 flex flex-col items-end">
                <p>姓名：
                    <input type="text"
                           id="name"
                           placeholder="请输入姓名"
                           class="border border-gray-300 rounded px-2 py-1 mt-1">
                </p>
                <p class="mt-2">校区：
                    <input type="text"
                           id="campus"
                           placeholder="请输入校区"
                           class="border border-gray-300 rounded px-2 py-1 mt-1">
                </p>
            </div>
        </div>

        <div class="bg-blue-50 p-4 rounded-md border border-blue-100">
            <h2>
                Dear Learners
            </h2>
            <h3 class="font-bold text-primary flex">
                Warm Welcome to DONGS Overseas Academy!
            </h3>
            <p>
                We are delighted to extend a warm welcome to you as you embark on your journey of learning courses
                at our esteemed academy. At DONGS, we are committed to providing a supportive and enriching learning
                environment that will empower you to achieve your goals and excel in your endeavors.
            </p>
            <p>
                我们很高兴热烈欢迎您到董氏留学学习课程。在董氏，我们致力于提供一个支持性和丰富的学习环境，
                使您能够实现自己的目标并在相应考试中取得优异成绩。
            </p>
        </div>

        <div class="bg-blue-50 p-4 mt-5 rounded-md border border-blue-100">
            <ul class="list-disc list-inside mt-2 text-gray-700 text-sm space-y-1">
                <li>请在规定时间内完成所有题目并提交</li>
                <li>点击选项即可选择答案，可随时修改</li>
                <li>请确保网络连接稳定</li>
            </ul>
        </div>
    </div>

    <!-- 第一部分-词汇 ✅ -->
    <section class="mb-10">
        <h3 class="section-title flex items-center">
            <i class="fa fa-book text-primary mr-2"></i>
            词汇:
        </h3>

        <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
            <div class="flex flex-col md:flex-row justify-between items-start md:items-center">
                <div>
                    <p>
                        高频核心词汇测试
                    </p>
                </div>
            </div>
        </div>

        <!-- 卡片容器 - 使用flex布局实现一行4个 -->
        <div id="cardContainer" class="grid grid-cols-5 lg:grid-cols-5 gap-3">
        </div>
    </section>

    <!-- 第二部分-语法 ✅ -->
    <section class="mb-10">
        <h3 class="section-title flex items-center">
            <i class="fa fa-pencil text-primary mr-2"></i>
            语法:
        </h3>
        <div class="flex flex-col mt-5 lg:flex-row gap-6">
            <div class="lg:w-1/2 bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                <div class="bg-gray-50 px-4 py-3 border-b border-gray-200 font-medium flex items-center">
                    <i class="fa fa-sharp-duotone fa-light fa-book text-primary mr-2"></i>
                    选择正确的选项
                </div>
                <div class=" p-6 overflow-y-auto scrollbar-custom">
                    <div class="text-gray-700 text-xl pt-4 leading-relaxed space-y-4">
                        <p>
                            1. ________ Li Bai, a great Chinese poet, was born is known to the public, but some won't
                            accept it.
                        </p>
                        <p>
                            2. He has a ________jacket .
                        </p>
                        <p>
                            3 .Over the past decade, the growing use of renewable energy ________ a major change in
                            global energy policies, and it is likely that this trend ________ in the coming years.
                        </p>
                        <p>
                            4. He tried ________ a new microphone and was able to make himself ________.
                        </p>
                        <p>
                            5. ________the economic data clearly indicates a positive trend, many investors remain
                            cautious, ________is a phenomenon we often see in uncertain markets.
                        </p>
                    </div>
                </div>
            </div>

            <div class="lg:w-1/2 bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                <div class="bg-gray-50 px-4 py-3 border-b border-gray-200 font-medium flex justify-between items-center">
                    <div class="flex items-center">
                        <i class="fa fa-list-alt text-primary mr-2"></i>请选择
                    </div>
                </div>
                <div class=" p-6 overflow-y-auto scrollbar-custom">
                    <div class="space-y-15">
                        <div class="column-layout flex flex-col space-y-2 parent grammarSelectOptions">
                            <!-- 第一 -->
                            <div class="relative row-layout gap-2 bg-white p-3 rounded-lg shadow-sm  border border-gray-100">
                                <i class="absolute top-4 left-4 ">1.</i>
                                <div class="pl-8 grid grid-cols-1 sm:grid-cols-2">
                                    <p class="text-xl"><input type="radio" name="select1" value="1"
                                                              class="mr-1 accent-primary">
                                        A. That
                                    </p>
                                    <p class="text-xl"><input type="radio" name="select1" value="2"
                                                              class="mr-1 accent-primary">
                                        B. What
                                    </p>
                                    <p class="text-xl"><input type="radio" name="select1" value="3"
                                                              class="mr-1 accent-primary">
                                        C. Where
                                    </p>
                                    <p class="text-xl"><input type="radio" name="select1" value="4"
                                                              class="mr-1 accent-primary">
                                        D. As
                                    </p>
                                </div>
                            </div>

                            <!-- 第二 -->
                            <div class="relative row-layout  gap-2 bg-white child w-full p-3 rounded-lg shadow-sm border border-gray-100">
                                <i class="absolute top-4 left-4 ">2.</i>
                                <div class="pl-8 grid grid-cols-1 sm:grid-cols-2">
                                    <p class="text-xl mr-1 "><input type="radio" name="select2" value="1"
                                                                    class="mr-1 accent-primary">
                                        A. beautiful new black Italian leather
                                    </p>
                                    <p class="text-xl mr-1  "><input type="radio" name="select2" value="2"
                                                                     class="mr-1 accent-primary">
                                        B. new black beautiful Italian leather
                                    </p>
                                    <p class="text-xl mr-1  "><input type="radio" name="select2" value="3"
                                                                     class="mr-1 accent-primary">
                                        C. new black Italian beautiful leather
                                    </p>
                                    <p class="text-xl mr-1  "><input type="radio" name="select2" value="4"
                                                                     class="mr-1 accent-primary">
                                        D. beautiful leather new black Italian
                                    </p>
                                </div>
                            </div>

                            <!-- 第三 -->
                            <div class="relative row-layout gap-2 bg-white h-full p-3 rounded-lg shadow-sm border border-gray-100">
                                <i class="absolute top-4 left-4 ">3.</i>
                                <div class="pl-8 grid grid-cols-1 sm:grid-cols-2">
                                    <p class="text-xl mr-1 "><input type="radio" name="select3" value="1"
                                                                    class="mr-1 accent-primary">
                                        A. has led to... will continue
                                    </p>
                                    <p class="text-xl mr-1  "><input type="radio" name="select3" value="2"
                                                                     class="mr-1 accent-primary">
                                        B. led to... continues
                                    </p>
                                    <p class="text-xl mr-1  "><input type="radio" name="select3" value="3"
                                                                     class="mr-1 accent-primary">
                                        C. had led to... has continued
                                    </p>
                                    <p class="text-xm mr-1  "><input type="radio" name="select3" value="4"
                                                                     class="mr-1 accent-primary">
                                        D. was leading to... had continued
                                    </p>
                                </div>
                            </div>

                            <div class="relative row-layout  gap-2 bg-white child w-full p-3 rounded-lg shadow-sm border border-gray-100">
                                <i class="absolute top-4 left-4 ">4.</i>
                                <div class="pl-8 grid grid-cols-1 sm:grid-cols-2">
                                    <p class="text-xl mr-1 "><input type="radio" name="select4" value="1"
                                                                    class="mr-1 accent-primary">
                                        A. using... to hear
                                    </p>
                                    <p class="text-xl mr-1  "><input type="radio" name="select4" value="2"
                                                                     class="mr-1 accent-primary">
                                        B. to use...hear
                                    </p>
                                    <p class="text-xl mr-1  "><input type="radio" name="select4" value="3"
                                                                     class="mr-1 accent-primary">
                                        C. using... heard
                                    </p>
                                    <p class="text-xl mr-1  "><input type="radio" name="select4" value="4"
                                                                     class="mr-1 accent-primary">
                                        D. use...heard
                                    </p>
                                </div>
                            </div>

                            <div class="relative row-layout  gap-2 bg-white child w-full p-3 rounded-lg shadow-sm border border-gray-100">
                                <i class="absolute top-4 left-4 ">5.</i>
                                <div class="pl-8 grid grid-cols-1 sm:grid-cols-2">
                                    <p class="text-xl mr-1 "><input type="radio" name="select5" value="1"
                                                                    class="mr-1 accent-primary">
                                        A. Now that... as
                                    </p>
                                    <p class="text-xl mr-1  "><input type="radio" name="select5" value="2"
                                                                     class="mr-1 accent-primary">
                                        B. Even if... that
                                    </p>
                                    <p class="text-xl mr-1  "><input type="radio" name="select5" value="3"
                                                                     class="mr-1 accent-primary">
                                        C. Unless... what
                                    </p>
                                    <p class="text-xl mr-1  "><input type="radio" name="select5" value="4"
                                                                     class="mr-1 accent-primary">
                                        D. While... which
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="bg-white mt-5 rounded-lg shadow-sm p-4 mb-6">
            <div class="flex flex-col md:flex-row justify-between items-start md:items-center">
                <div>
                    <p>
                        单词的同义转换
                    </p>
                </div>
            </div>
        </div>

        <!-- 卡片容器 - 使用flex布局实现一行4个 -->
        <div id="wordSelectContainer" class="grid grid-cols-5 lg:grid-cols-5 gap-3">
        </div>

        <div style="display: none" class="flex flex-col lg:flex-row gap-6">
            <div class="lg:w-1/3 bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                <div class="bg-gray-50 px-4 py-3 border-b border-gray-200 font-medium flex justify-between items-center">
                    <div class="flex items-center">
                        <i class="fa fa-list-alt text-primary mr-2"></i>
                        单词列表：
                    </div>
                </div>
                <div class="text-gray-700 text-xl pl-5 pt-3 leading-relaxed space-y-3">
                    <p>1. ignore</p>
                    <p>2. straightforward</p>
                    <p>3. be keen on</p>
                    <p>4. investigate</p>
                    <p>5. newspaper</p>
                    <p>6. famous</p>
                    <p>7. maintain</p>
                    <p>8. resemble</p>
                    <p>9. complex</p>
                    <p>10. fashion</p>
                </div>
            </div>

            <div class="lg:w-2/3 bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                <div class="bg-gray-50 px-4 py-3 border-b border-gray-200 font-medium flex justify-between items-center">
                    <div class="flex items-center">
                        <i class="fa fa-list-alt text-primary mr-2"></i>
                        请选择对应的同义单词：
                    </div>
                </div>

                <div class=" p-6 overflow-y-auto scrollbar-custom">
                    <div class="space-y-4">
                        <div class="pl-8 relative grid grid-cols-4">
                            <i class="absolute top-0.2 left-2 ">1.</i>
                            <p class="text-xm mr-1 "><input type="radio" name="grammar1" value="1"
                                                            class="mr-1 accent-primary">
                                A. keep an eye on
                            </p>
                            <p class="text-xm mr-1 "><input type="radio" name="grammar1" value="2"
                                                            class="mr-1 accent-primary">
                                B. be dismissive of
                            </p>
                            <p class="text-xm mr-1 "><input type="radio" name="grammar1" value="3"
                                                            class="mr-1 accent-primary">
                                C. bear in mind
                            </p>
                            <p class="text-xm mr-1 "><input type="radio" name="grammar1" value="4"
                                                            class="mr-1 accent-primary">
                                D. up to
                            </p>
                        </div>

                        <div class="pl-8 relative grid grid-cols-4">
                            <i class="absolute top-0.2 left-2 ">2.</i>
                            <p class="text-xm mr-1 "><input type="radio" name="grammar2" value="1"
                                                            class="mr-1 accent-primary">
                                A. easy
                            </p>
                            <p class="text-xm mr-1 "><input type="radio" name="grammar2" value="2"
                                                            class="mr-1 accent-primary">
                                B. available
                            </p>
                            <p class="text-xm mr-1 "><input type="radio" name="grammar2" value="3"
                                                            class="mr-1 accent-primary">
                                C. flexible
                            </p>
                            <p class="text-xm mr-1 "><input type="radio" name="grammar2" value="4"
                                                            class="mr-1 accent-primary">
                                D. ancient
                            </p>
                        </div>

                        <div class="pl-8 relative grid grid-cols-4">
                            <i class="absolute top-0.2 left-2 ">3.</i>
                            <p class="text-xm mr-1 "><input type="radio" name="grammar3" value="1"
                                                            class="mr-1 accent-primary">
                                A. pay attention to
                            </p>
                            <p class="text-xm mr-1 "><input type="radio" name="grammar3" value="2"
                                                            class="mr-1 accent-primary">
                                B. be interested in
                            </p>
                            <p class="text-xm mr-1 "><input type="radio" name="grammar3" value="3"
                                                            class="mr-1 accent-primary">
                                C. be put off by
                            </p>
                            <p class="text-xm mr-1 "><input type="radio" name="grammar3" value="4"
                                                            class="mr-1 accent-primary">
                                D. be aware of
                            </p>
                        </div>

                        <div class="pl-8 relative grid grid-cols-4">
                            <i class="absolute top-0.2 left-2 ">4.</i>
                            <p class="text-xm mr-1 "><input type="radio" name="grammar4" value="1"
                                                            class="mr-1 accent-primary">
                                A. probe
                            </p>
                            <p class="text-xm mr-1 "><input type="radio" name="grammar4" value="2"
                                                            class="mr-1 accent-primary">
                                B. prove
                            </p>
                            <p class="text-xm mr-1 "><input type="radio" name="grammar4" value="3"
                                                            class="mr-1 accent-primary">
                                C. experiment
                            </p>
                            <p class="text-xm mr-1 "><input type="radio" name="grammar4" value="4"
                                                            class="mr-1 accent-primary">
                                D. demonstrate
                            </p>
                        </div>

                        <div class="pl-8 relative grid grid-cols-4">
                            <i class="absolute top-0.2 left-2 ">5.</i>
                            <p class="text-xm mr-1 "><input type="radio" name="grammar5" value="1"
                                                            class="mr-1 accent-primary">
                                A. press
                            </p>
                            <p class="text-xm mr-1 "><input type="radio" name="grammar5" value="2"
                                                            class="mr-1 accent-primary">
                                B. meadow
                            </p>
                            <p class="text-xm mr-1 "><input type="radio" name="grammar5" value="3"
                                                            class="mr-1 accent-primary">
                                C. research
                            </p>
                            <p class="text-xm mr-1 "><input type="radio" name="grammar5" value="4"
                                                            class="mr-1 accent-primary">
                                D. journal
                            </p>
                        </div>

                        <div class="pl-8 relative grid grid-cols-4">
                            <i class="absolute top-0.2 left-2 ">6.</i>
                            <p class="text-xm mr-1 "><input type="radio" name="grammar6" value="1"
                                                            class="mr-1 accent-primary">
                                A. notorious
                            </p>
                            <p class="text-xm mr-1 "><input type="radio" name="grammar6" value="2"
                                                            class="mr-1 accent-primary">
                                B. renowned
                            </p>
                            <p class="text-xm mr-1 "><input type="radio" name="grammar6" value="3"
                                                            class="mr-1 accent-primary">
                                C. permanent
                            </p>
                            <p class="text-xm mr-1 "><input type="radio" name="grammar6" value="4"
                                                            class="mr-1 accent-primary">
                                D. eligible
                            </p>
                        </div>

                        <div class="pl-8 relative grid grid-cols-4">
                            <i class="absolute top-0.2 left-2 ">7.</i>
                            <p class="text-xm mr-1 "><input type="radio" name="grammar7" value="1"
                                                            class="mr-1 accent-primary">
                                A. switch
                            </p>
                            <p class="text-xm mr-1 "><input type="radio" name="grammar7" value="2"
                                                            class="mr-1 accent-primary">
                                B. contain
                            </p>
                            <p class="text-xm mr-1 "><input type="radio" name="grammar7" value="3"
                                                            class="mr-1 accent-primary">
                                C. keep
                            </p>
                            <p class="text-xm mr-1 "><input type="radio" name="grammar7" value="4"
                                                            class="mr-1 accent-primary">
                                D. attain
                            </p>
                        </div>

                        <div class="pl-8 relative grid grid-cols-4">
                            <i class="absolute top-0.2 left-2 ">8.</i>
                            <p class="text-xm mr-1 "><input type="radio" name="grammar8" value="1"
                                                            class="mr-1 accent-primary">
                                A. be similar to
                            </p>
                            <p class="text-xm mr-1 "><input type="radio" name="grammar8" value="2"
                                                            class="mr-1 accent-primary">
                                B. assemble
                            </p>
                            <p class="text-xm mr-1 "><input type="radio" name="grammar8" value="3"
                                                            class="mr-1 accent-primary">
                                C. vary
                            </p>
                            <p class="text-xm mr-1 "><input type="radio" name="grammar8" value="4"
                                                            class="mr-1 accent-primary">
                                D. distinguish sb/sth from
                            </p>
                        </div>

                        <div class="pl-8 relative grid grid-cols-4">
                            <i class="absolute top-0.2 left-2 ">9.</i>
                            <p class="text-xm mr-1 "><input type="radio" name="grammar9" value="1"
                                                            class="mr-1 accent-primary">
                                A. monotonous
                            </p>
                            <p class="text-xm mr-1 "><input type="radio" name="grammar9" value="2"
                                                            class="mr-1 accent-primary">
                                B. simple
                            </p>
                            <p class="text-xm mr-1 "><input type="radio" name="grammar9" value="3"
                                                            class="mr-1 accent-primary">
                                C. complicated
                            </p>
                            <p class="text-xm mr-1 "><input type="radio" name="grammar9" value="4"
                                                            class="mr-1 accent-primary">
                                D. comply
                            </p>
                        </div>

                        <div class="pl-8 relative grid grid-cols-4">
                            <i class="absolute top-0.2 left-2 ">10.</i>
                            <p class="text-xm mr-1 "><input type="radio" name="grammar10" value="1"
                                                            class="mr-1 accent-primary">
                                A. move
                            </p>
                            <p class="text-xm mr-1 "><input type="radio" name="grammar10" value="2"
                                                            class="mr-1 accent-primary">
                                B. exchange
                            </p>
                            <p class="text-xm mr-1 "><input type="radio" name="grammar10" value="3"
                                                            class="mr-1 accent-primary">
                                C. perplex
                            </p>
                            <p class="text-xm mr-1 "><input type="radio" name="grammar10" value="4"
                                                            class="mr-1 accent-primary">
                                D. make
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 第三部分-听力 ✅ -->
    <section class="mb-10">
        <h3 class="section-title flex items-center">
            <i class="fa fa-headphones text-primary mr-2"></i>
            听力:
        </h3>

        <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
            <div class="flex flex-col md:flex-row justify-between items-start md:items-center">
                <div>
                    <p>
                        Welcome to the standard quiz test for the Listening Section 1. This quiz is designed to
                        assess your listening skills in a simulated exam environment. Please carefully read and
                        follow the instructions provided below
                    </p>
                    <p>
                        欢迎来到听力第 1 部分的标准测验测试。本测验旨在评估您在模拟考试环境中的听力技能。请仔细阅读并遵循以下说明:
                    </p><br>
                    <p>
                        1. Timing: Manage your time wisely to
                        ensure you have enough time to listen to the recording and answer all the questions.
                    </p>
                    <p>
                        时间：明智地管理您的时间，以确保您有足够的时间收听录音并回答所有问题。
                    </p><br>
                    <p>
                        2. Question Format: The quiz consists of five fill-in-the-blank questions. Each question will
                        have a missing word or phrase that you need to complete by listening to the recording. Make sure
                        to pay attention to the specific information required to fill in the blanks accurately.
                        All the answers must be small letters.
                    </p>
                    <p>
                        问题形式：测验由五道填空题组成。每个问题都会缺少一个单词或短语，您需要通过收听录音来完成。
                        请务必注意准确填空所需的具体信息。所有答案必须是小写字母。
                    </p><br>
                    <p>
                        3. Recording: The recording will be played once only. You will not have the opportunity to
                        listen to it again, so listen attentively and take notes if necessary. The recording will be
                        played in a clear and audible manner, but please ensure you are in a quiet environment to
                        maximize your listening comprehension.
                    </p>
                    <p>
                        录音：录音将仅播放一次。您将没有机会再次听，因此请专心聆听并在必要时做笔记。录音将以清晰可听的方式播放，但请确保您
                        处于安静的环境中，以最大限度地提高您的听力理解能力。
                    </p><br>
                    <p>
                        4. Submitting: Once the time is up,
                        please stop writing immediately and ensure all your questions are completed.
                    </p>
                    <p>
                        提交：时间一到，请立即停止写作并确保完成所有问题。
                    </p><br>
                    <p>
                        Remember, this quiz aims to simulate the Listening Section 1 experience and assess your
                        listening skills. Stay focused, listen attentively, and provide accurate answers to the best of
                        your ability within the allocated time.
                    </p>
                    <p>
                        请记住，此测验旨在模拟听力第 1 部分的体验并评估您的听力技能。
                        保持专注，专心倾听，并在分配的时间内尽最大努力提供准确的答案。
                    </p>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg h-[350px] mb-5 shadow-sm border border-gray-200 overflow-hidden">
            <div class="bg-gray-50 px-4 py-3 border-b border-gray-200 font-medium flex justify-between items-center">
                <div class="flex items-center">
                    <i class="fa fa-list-alt text-primary mr-2"></i>
                    请输入你听到的单词(字母全部小写,点击输入框自动播放音频)
                </div>
            </div>
            <div class="h-74 bg-gray-100 rounded-lg p-4 flex gap-4">
                <div id="wordListenDataContainer"
                     class="grid grid-cols-1 md:grid-cols-2 w-full gap-1 bg-white p-6 rounded-xl shadow-md">
                </div>
            </div>
        </div>

        <!-- 隐藏的音频元素 -->
        <audio id="audioPlayer">
            <!-- 这里可以放入实际的音频源 -->
            <source src="http://1.92.74.42:81/mp3/exam2_1.mp3" type="audio/mpeg">
            您的浏览器不支持音频播放
        </audio>

        <audio id="audioPlayer2">
            <!-- 这里可以放入实际的音频源 -->
            <source src="http://1.92.74.42:81/mp3/exam2_2.mp3" type="audio/mpeg">
            您的浏览器不支持音频播放
        </audio>

        <div class="flex flex-col lg:flex-row gap-6">
            <div class="lg:w-1/2 bg-white rounded-lg h-[350px] shadow-sm border border-gray-200 overflow-hidden">
                <div class="bg-gray-50 px-4 py-3 h-[60px] border-b border-gray-200 font-medium justify-between flex items-center">
                    <div class="flex items-center">
                        <i class="fa fa-sharp-duotone fa-light fa-book text-primary mr-2"></i>
                        请根据听到的信息回答以下题目(点击右侧播放按钮,只能听一遍)
                    </div>

                    <div id="playButton" class="play-button">
                        <i class="fa fa-play text-2xl"></i>
                    </div>

                </div>
                <h4 class="mx-auto text-center font-bold w-1/2">
                    Events during Kenton Festival
                </h4><br>
                <div class="pl-8" id="listenText">
                    <p class="text-xl">
                        Start date: 16th May<br>
                        Opening ceremony (first day)<br>
                        In town centre, starting at 1 ________________________<br>
                        The mayor will make a speech<br>
                        A 2 ________________________ will perform<br>
                        Performance of a 3 ________________________ about Helen Tungate (a 4
                        ________________________)<br>
                        Evening fireworks display situated across the 5 ________________________
                    </p>
                </div>
            </div>

            <div class="lg:w-1/2 bg-white rounded-lg h-[350px] shadow-sm border border-gray-200 overflow-hidden">
                <div class="bg-gray-50 px-4 py-3 h-[60px] border-b border-gray-200 font-medium flex justify-between items-center">
                    <div class="flex items-center">
                        <i class="fa fa-list-alt text-primary mr-2"></i>
                        Your Answer你的答案：
                    </div>

                </div>
                <div class=" p-6 overflow-y-auto scrollbar-custom">
                    <!-- 存放生成的 input 容器 -->
                    <div id="inputContainer" class="space-y-2"></div>
                </div>
            </div>
        </div>

        <div class="flex flex-col lg:flex-row mt-4 gap-6">
            <div class="lg:w-1/2 bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                <div class="bg-gray-50 px-4 py-3 h-[60px] border-b border-gray-200 font-medium justify-between flex items-center">
                    <div class="flex items-center">
                        <i class="fa fa-sharp-duotone fa-light fa-book text-primary mr-2"></i>
                        请根据听到的信息回答以下题目(点击右侧播放按钮,只能听一遍)
                    </div>

                    <div id="playButton2" class="play-button">
                        <i class="fa fa-play text-2xl"></i>
                    </div>
                </div>

                <div class="pl-8 text-xl pt-6 grid gap-24">
                    <p>
                        1. According to Victor and Olivia, academics thought that Polynesian migration from the east was
                        impossible due to
                    </p>
                    <p>
                        2. Which do the speakers agree was the main reason for Heyerdahl's raft journey?
                    </p>
                    <p>
                        3. What was most important to Heyerdahl about his raft journey?
                    </p>
                    <p>
                        4. Why did Heyerdahl go to Easter Island?
                    </p>
                    <p>
                        5. In Olivia's opinion, Heyerdahl's greatest influence was on
                    </p>
                </div>
            </div>

            <div class="lg:w-1/2 bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                <div class="bg-gray-50 px-4 py-3 h-[60px] border-b border-gray-200 font-medium flex justify-between items-center">
                    <div class="flex items-center">
                        <i class="fa fa-list-alt text-primary mr-2"></i>
                        Your Answer你的答案：
                    </div>

                </div>
                <div class=" p-6 overflow-y-auto grid gap-2 scrollbar-custom">
                    <div class="relative row-layout gap-2 bg-white p-3 rounded-lg shadow-sm  border border-gray-100">
                        <i class="absolute top-4 left-4 ">1.</i>
                        <div class="pl-8">
                            <p class="text-xl"><input type="radio" name="listen_select1" value="1"
                                                      class="mr-1 accent-primary">
                                A the fact that Eastern countries were far away.
                            </p>
                            <p class="text-xl"><input type="radio" name="listen_select1" value="2"
                                                      class="mr-1 accent-primary">
                                B the lack of materials for boat building.
                            </p>
                            <p class="text-xl"><input type="radio" name="listen_select1" value="3"
                                                      class="mr-1 accent-primary">
                                C the direction of the winds and currents.
                            </p>
                        </div>
                    </div>
                    <div class="relative row-layout gap-2 bg-white p-3 rounded-lg shadow-sm  border border-gray-100">
                        <i class="absolute top-4 left-4 ">2.</i>
                        <div class="pl-8">
                            <p class="text-xl"><input type="radio" name="listen_select2" value="1"
                                                      class="mr-1 accent-primary">
                                A to overcome a research setback
                            </p>
                            <p class="text-xl"><input type="radio" name="listen_select2" value="2"
                                                      class="mr-1 accent-primary">
                                B to demonstrate a personal quality
                            </p>
                            <p class="text-xl"><input type="radio" name="listen_select3" value="3"
                                                      class="mr-1 accent-primary">
                                C to test a new theory
                            </p>
                        </div>
                    </div>
                    <div class="relative row-layout gap-2 bg-white p-3 rounded-lg shadow-sm  border border-gray-100">
                        <i class="absolute top-4 left-4 ">3.</i>
                        <div class="pl-8">
                            <p class="text-xl"><input type="radio" name="listen_select3" value="1"
                                                      class="mr-1 accent-primary">
                                A the fact that he was the first person to do it
                            </p>
                            <p class="text-xl"><input type="radio" name="listen_select3" value="2"
                                                      class="mr-1 accent-primary">
                                B the speed of crossing the Pacific
                            </p>
                            <p class="text-xl"><input type="radio" name="listen_select3" value="3"
                                                      class="mr-1 accent-primary">
                                C the use of authentic construction methods
                            </p>
                        </div>
                    </div>
                    <div class="relative row-layout gap-2 bg-white p-3 rounded-lg shadow-sm  border border-gray-100">
                        <i class="absolute top-4 left-4 ">4.</i>
                        <div class="pl-8">
                            <p class="text-xl"><input type="radio" name="listen_select4" value="1"
                                                      class="mr-1 accent-primary">
                                A to build a stone statue
                            </p>
                            <p class="text-xl"><input type="radio" name="listen_select4" value="2"
                                                      class="mr-1 accent-primary">
                                B to sail a reed boat
                            </p>
                            <p class="text-xl"><input type="radio" name="listen_select4" value="3"
                                                      class="mr-1 accent-primary">
                                C to learn the local language
                            </p>
                        </div>
                    </div>

                    <div class="relative row-layout gap-2 bg-white p-3 rounded-lg shadow-sm  border border-gray-100">
                        <i class="absolute top-4 left-4 ">5.</i>
                        <div class="pl-8">
                            <p class="text-xl"><input type="radio" name="listen_select5" value="1"
                                                      class="mr-1 accent-primary">
                                A theories about Polynesian origins.
                            </p>
                            <p class="text-xl"><input type="radio" name="listen_select5" value="2"
                                                      class="mr-1 accent-primary">
                                B the development of archaeological methodology.
                            </p>
                            <p class="text-xl"><input type="radio" name="listen_select5" value="3"
                                                      class="mr-1 accent-primary">
                                C establishing archaeology as an academic subject.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 第四部分-阅读 ✅ -->
    <section class="mb-10">
        <h3 class="section-title flex items-center">
            <i class="fa fa-file-text text-primary mr-2"></i>
            阅读：
        </h3>

        <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
            <div class="flex flex-col md:flex-row justify-between items-start md:items-center">
                <div>
                    <h2 class="text-xl font-bold mb-1">The steam car
                    </h2>
                    <h3 class="text-xl">
                        The successes and failures of the Doble brothers and their steam cars
                    </h3>

                    <p class="text-xl">
                        E <span class="indent-4"></span> Later that year Abner Doble delivered unhappy news to those
                        eagerly awaiting the
                        delivery of their modern new cars. Those buyers who received the handful of completed cars
                        complained that the vehicles were sluggish and erratic, sometimes going in reverse when they
                        should go forward. The new engine design, though innovative, was still plagued with serious
                        glitches.
                    </p><br>
                    <p class="text-xl">
                        F <span class="indent-4"></span> The brothers made one final attempt to produce a viable steam
                        automobile. In early 1924,
                        the Doble brothers shipped a Model E to New York City to be road-tested by the Automobile Club
                        of America. After sitting overnight in freezing temperatures, the car was pushed out into the
                        road and left to sit for over an hour in the frosty morning air. At the turn of the key, the
                        boiler lit and reached its operating pressure inside of forty seconds. As they drove the test
                        vehicle further, they found that its evenly distributed weight lent it surprisingly good
                        handling, even though it was so heavy. As the new Doble steamer was further developed and
                        tested,
                        its maximum speed was pushed to over a hundred miles per hour, and it achieved about fifteen
                        miles per gallon of kerosene with negligible emissions.
                    </p><br>
                    <p class="text-xl">
                        G <span class="indent-4"></span> Sadly, the Dobles’ brilliant steam car never was a financial
                        success. Priced at around
                        $18, 000 in 1924, it was popular only among the very wealthy. Plus, it is said that no two Model
                        Es were quite the same, because Abner Doble tinkered endlessly with the design. By the time the
                        company folded in 1931, fewer than fifty of the amazing Model E steam cars had been produced.
                        For his whole career, until his death in 1961, Abner Doble remained adamant that steam-powered
                        automobiles were at least equal to gasoline cars, if not superior. Given the evidence, he may
                        have been right. Many of the Model E Dobles which have survived are still in good working
                        condition, some having been driven over half a million miles with only normal maintenance.
                        Astonishingly, an unmodified Doble Model E runs clean enough to pass the emissions laws in
                        California today, and they are pretty strict. It is true that the technology poses some
                        difficult problems, but you cannot help but wonder how efficient a steam car might be with the
                        benefit of modern materials and computers. Under the current pressure to improve automotive
                        performance and reduce emissions, it is not unthinkable that the steam car may rise again.
                    </p><br>
                </div>
            </div>
        </div>

        <div class="flex flex-col mb-5 lg:flex-row gap-6">
            <div class="lg:w-1/2 bg-white rounded-lg pt-6 shadow-sm border overflow-hidden">
                <h4 class="text-xl" style="font-weight: bold">List of Headings</h4>
                <div class="px-4 py-3  font-medium justify-between flex items-center">
                    <div class="centered-container text-xl">
                        <table class="roman-table">
                            <tr>
                                <td> I</td>
                                <td class="text-left">A period in cold conditions before the technology is assessed</td>
                            </tr>
                            <tr>
                                <td> II</td>
                                <td class="text-left">Good and bad aspects of steam technology are passed on</td>
                            </tr>
                            <tr>
                                <td> III</td>
                                <td class="text-left">A possible solution to the issues of today</td>
                            </tr>
                            <tr>
                                <td> IV</td>
                                <td class="text-left">Further improvements lead to commercial orders</td>
                            </tr>
                            <tr>
                                <td> V</td>
                                <td class="text-left">A disappointing outcome for customers</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>

            <div class="lg:w-1/2 bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                <div class="px-4 py-3 font-medium">
                    <div class="child-element mb-6">
                        1. Paragraph E _____ <span class="indent-4"></span>
                        2. Paragraph F _____ <span class="indent-4"></span>
                        3. Paragraph G _____
                    </div>
                </div>
                <div class="pl-5 pr-5 mb-4">
                    <div class="custom-select mb-5">
                        <select class="select">
                            <option value="">第一题请选择...</option>
                            <option value="1">i
                                <span class="indent-4">A period in cold conditions before the technology is assessed</span>
                            </option>
                            <option value="2">ii
                                <span class="indent-4"></span>Good and bad aspects of steam technology are passed on
                            </option>
                            <option value="3">iii
                                <span class="indent-4"></span>A possible solution to the issues of today
                            </option>
                            <option value="4">iv
                                <span class="indent-4"></span>Further improvements lead to commercial orders
                            </option>
                            <option value="5">v
                                <span class="indent-4"></span>A disappointing outcome for customers
                            </option>
                        </select>
                    </div>

                    <div class="custom-select mb-5">
                        <select class="select">
                            <option value="">第二题请选择...</option>
                            <option value="1">i
                                <span class="indent-4">A period in cold conditions before the technology is assessed</span>
                            </option>
                            <option value="2">ii
                                <span class="indent-4"></span>Good and bad aspects of steam technology are passed on
                            </option>
                            <option value="3">iii
                                <span class="indent-4"></span>A possible solution to the issues of today
                            </option>
                            <option value="4">iv
                                <span class="indent-4"></span>Further improvements lead to commercial orders
                            </option>
                            <option value="5">v
                                <span class="indent-4"></span>A disappointing outcome for customers
                            </option>
                        </select>
                    </div>

                    <div class="custom-select">
                        <select class="select">
                            <option value="">第三题请选择...</option>
                            <option value="1">i
                                <span class="indent-4">A period in cold conditions before the technology is assessed</span>
                            </option>
                            <option value="2">ii
                                <span class="indent-4"></span>Good and bad aspects of steam technology are passed on
                            </option>
                            <option value="3">iii
                                <span class="indent-4"></span>A possible solution to the issues of today
                            </option>
                            <option value="4">iv
                                <span class="indent-4"></span>Further improvements lead to commercial orders
                            </option>
                            <option value="5">v
                                <span class="indent-4"></span>A disappointing outcome for customers
                            </option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
            <div class="flex flex-col md:flex-row justify-between items-start md:items-center">
                <div>
                    <p class="text-xl">
                        Complete the summary below.<br>
                        Choose <span style="font-weight: bold">ONE WORD AND/OR A NUMBER</span> from the passage for each
                        answer.<br> Write your answers in boxes 4-6 on your answer sheet.<br>
                    </p>
                </div>
            </div>
        </div>

        <div class="flex flex-col mb-5 lg:flex-row gap-6">
            <div class="lg:w-1/2 bg-white rounded-lg shadow-sm border overflow-hidden">
                <div class="px-4 py-3 font-medium justify-between flex items-center">
                    <div class="centered-container text-xl">
                        <p style="display: block;">
                            The Model E was road-tested in 1924 by the Automobile Club of America. They found it easy to drive,
                            despite its weight, and it impressed the spectators. A later version of the Model E raised its
                            4_____ while keeping its emissions extremely low.
                        </p>
                        <p style="display: block;margin: 1rem 0;">
                            The steam car was too expensive for many people and its design was constantly being altered.
                            Under 5_____ cars were
                            produced before the company went out of business. However, even
                            today, there are Model Es on the road in the US. They are straightforward to maintain, and they
                            satisfy California’s 6_____
                            emissions laws. Perhaps today’s technology and materials would help us revive the steam car.
                        </p>
                    </div>
                </div>
            </div>

            <div class="lg:w-1/2 bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                <div class="md:flex-row items-start mt-8">
                    <div id="readingInputContainer" class=" grid grid-cols-1 gap-8 pl-5 pr-5 pt-5">

                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 第五部分-写作 ✅-->
    <section class="mb-10">
        <h3 class="section-title flex items-center">
            <i class="fa fa-pencil text-primary mr-2"></i>
            写作：
        </h3>

        <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
            <div class="flex flex-col md:flex-row justify-between items-start md:items-center">
                <div class="text-xl">
                    <p>
                        Please write a body paragraph on the given topic, ensuring that it contains a minimum of 70
                        words.
                    </p>
                    <p>
                        请就给定主题写一个正文段落，确保它至少包含 70 个单词。
                    </p>
                </div>
            </div>
        </div>

        <div class="flex flex-col lg:flex-row gap-6">
            <div class="lg:w-1/2 bg-card rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                <div class="bg-gray-50 px-4 py-3 border-b border-gray-200 font-medium">
                    <i class="fa fa-file-text-o text-primary mr-2"></i>内容
                </div>
                <div class=" p-5 h-[600px] overflow-y-auto scrollbar-thin">
                    <p>
                        1. 支持 advantages > disadvantages (赞同利大于弊):<br>
                        Taking strategic risks in one's career can lead to unprecedented professional growth and
                        opportunities.<br>
                        （在职业生涯中采取战略性风险可以带来前所未有的专业发展和机会。）
                        后续可讨论：升职、创业、学习新技能、突破职业天花板等。
                    </p>
                    <p>
                        On a personal level, stepping into the unknown is a crucial catalyst for building resilience and
                        self-discovery.<br>
                        （在个人层面上，踏入未知领域是培养韧性和自我发现的关键催化剂。）
                        后续可讨论：如何从失败中学习、如何更了解自己、如何增强适应能力等。
                    </p>
                    <p>
                        2. 支持 disadvantages > advantages (赞同弊大于利):<br>
                        Reckless risks, particularly in the financial domain, can have devastating and long-lasting
                        consequences.<br>
                        （鲁莽的冒险，尤其是在金融领域，可能会产生毁灭性的且持久的影响。）
                        后续可讨论：投资失败、债务危机、破产等。
                    </p>
                    <p>
                        The significant psychological toll of failure, often resulting from risk-taking, is too heavy to
                        ignore.<br>
                        （失败常常由冒险导致，其带来的巨大心理代价沉重到不容忽视。）
                        后续可讨论：压力、焦虑、自信心受损、恐惧症等。
                    </p>
                    <p>
                        In personal relationships, unnecessary risks can jeopardize long-established trust and emotional
                        security.<br>
                        （在人际关系中，不必要的风险可能会危及长期建立的信任和情感安全感。）
                        后续可讨论：背叛、欺骗等行为对关系的破坏。
                    </p>
                    <p>
                        以上观点可供选择，学生可以自己想主题句，也可以从这几个被选中挑选主题句进行扩写。
                    </p>
                </div>
            </div>

            <div class="lg:w-1/2 bg-card rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                <div class="bg-gray-50 px-4 py-3 border-b border-gray-200 font-medium flex justify-between ">
                    <div class="flex items-center">
                        <i class="fa fa-list-alt text-primary mr-2"></i>
                        Your Answer你的答案：
                    </div>
                </div>
                <div class="p-5 h-[580px] overflow-y-auto scrollbar-thin">
                    <div class="space-y-6">
                        <textarea
                                id="article"
                                class="w-full h-hull px-4 py-2 border border-gray-300 rounded-lg resize-none"
                                rows="21" cols="100" placeholder="请输入..."></textarea>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>

<!-- 页脚 -->
<footer class="bg-white border-t border-gray-200 py-4 mt-10">
    <div class="container mx-auto px-4 text-center text-gray-600 text-sm">
        <p>技术支持:董氏留学 | 出国留学语言水平测试卷-挑战版 | 请勿在考试期间刷新页面或关闭浏览器</p>
    </div>
</footer>

<!-- 交卷确认模态框 -->
<div id="submitModal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-lg shadow-lg w-full max-w-md p-6 transform transition-all">
        <div class="text-center mb-4">
            <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-yellow-100 text-accent mb-4">
                <i class="fa fa-exclamation-triangle text-2xl"></i>
            </div>
            <h3 class="text-xl font-bold text-gray-800">确认交卷？</h3>
            <p class="text-gray-600 mt-2">您确定要提交试卷吗？提交后将无法修改答案。</p>
            <div class="mt-6 flex gap-3">
                <button id="cancelSubmit" class="flex-1 btn-secondary">取消</button>
                <button id="confirmSubmit" class="flex-1 btn-primary">确认交卷</button>
            </div>
        </div>
    </div>
</div>

<!-- 提交成功模态框 -->
<div id="successModal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-lg shadow-lg w-full max-w-md p-6 transform transition-all">
        <div class="text-center mb-4">
            <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-green-100 text-success mb-4">
                <i class="fa fa-check text-2xl"></i>
            </div>
            <h3 class="text-xl font-bold text-gray-800">提交成功</h3>
            <p id="submitData5" class="text-left text-gray-600 mt-2">词汇:正确率: 0 %</p>
            <p id="submitData1" class="text-left text-gray-600 mt-2">语法-语句:正确率: 0 %</p>
            <p id="submitData6" class="text-left text-gray-600 mt-2">语法-单词:正确率: 0 %</p>
            <p id="submitData2" class="text-left text-gray-600 mt-2">听力-短文:正确率: 0 %</p>
            <p id="submitData7" class="text-left text-gray-600 mt-2">听力-选择:正确率: 0 %</p>
            <p id="submitData4" class="text-left text-gray-600 mt-2">听力-单词:正确率: 0 %</p>
            <p id="submitData3" class="text-left text-gray-600 mt-2">阅读:正确率: 0 %</p>
            <p class="text-left text-gray-600 mt-2">写作:<span style="color: red">等待老师评分</span></p>
            <p class="text-gray-600 mt-2">感谢您的参与！</p>
            <div class="mt-6">
                <button id="closeSuccess" class="w-full btn-primary">关闭</button>
            </div>
        </div>
    </div>
</div>

<script>
    let userData = {
        list: []
    };

    let selectQuestionValueList = [];
    const listenWordShuffle = shuffleArray(listenWordContext)
    const grammarWordShuffle = shuffleArray(grammarWordContext)

    // 获取卡片容器
    const questionContainer = document.getElementById('cardContainer');
    const wordSelectContainer = document.getElementById('wordSelectContainer');

    // 获取音频元素
    const playButton = document.getElementById('playButton');
    const playButton2 = document.getElementById('playButton2');

    userAnswers = []
    grammarSelectAnswers = {}
    userAnswersSelect = {}
    userReadingSelect = {}

    // 语法-单词-初始化
    function grammarWordSelectInit() {
        wordSelectContainer.innerHTML = '';
        let questionIndex = 1
        grammarWordShuffle.forEach(question => {
            // console.log(question);
            const card = createGrammarWordSelect(question, questionIndex);
            questionIndex++
            wordSelectContainer.appendChild(card);
        });
    }

    // 语法-单词-初始化
    function createGrammarWordSelect(question, questionIndex) {
        const card = document.createElement('div');
        card.className = 'bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden card-effect';
        card.dataset.questionId = question.id;

        let cardId = question.title.replace(/ /g, '_') + '-options';
        // console.log(cardId);

        // 卡片内容
        card.innerHTML = `
            <div class="relative bg-neutral px-4 py-2 border-b border-gray-200">
              <span class="text-xl font-medium text-gray-700">${questionIndex}. ${question.title}</span>
            </div>
            <div class="p-4">
              <div class="space-y-2 cardSelectDivOptions" id="${cardId}"></div>
            </div>`;

        // 创建选项
        const optionsContainer = card.querySelector(`#${cardId}`);
        let optionItem = shuffleArray(question.options);
        optionItem.forEach((option, index) => {
            const optionEl = document.createElement('div');

            optionEl.id = 'grammar-select-' + questionIndex;
            optionEl.className = 'p-3 border relative border-gray-200 rounded text-xl option-hover cursor-pointer';

            optionEl.dataset.question = question.title;
            optionEl.dataset.correct = question.correct;

            // 选项内容（带A/B/C/D标识）
            optionEl.innerHTML = `
                  <div class="flex items-center ">
                    <div class="w-5 h-5 rounded border border-gray-300 mr-2 flex-shrink-0
                     flex items-center justify-center text-gray-500 text-xs">
                      ${String.fromCharCode(65 + index)}
                    </div><span class="text-xm">${option}</span>
                  </div>`;

            // 绑定点击事件
            optionEl.addEventListener('click', () => grammarSelectOption(optionEl, option));
            optionsContainer.appendChild(optionEl);
        });
        return card;
    }

    function grammarSelectOption(optionEl, option) {
        const questionId = optionEl.dataset.question;

        // 清除同一题的其他选项选中状态
        document.querySelectorAll(`[data-question="${questionId}"]`).forEach(el => {
            // console.log(el);
            el.dataset.userSelectOption = option;
            el.classList.remove('option-selected');
            el.querySelector('div:first-child div:first-child')
                .classList.remove('text-white', 'border-primary');
            el.querySelector('div:first-child div:first-child')
                .classList.add('border-gray-300', 'text-gray-500');
        });
        // console.log(option);

        // 设置当前选项为选中状态
        optionEl.classList.add('option-selected');
        optionEl.querySelector('div:first-child div:first-child').classList.remove('border-gray-300');
        optionEl.querySelector('div:first-child div:first-child').classList.add('border-primary');

        //提交数据
        let item = {
            questionsNumber: optionEl.id.split('-')[2],
            score: 1,
            correctAnswer: 0, //
            correctText: optionEl.dataset.correct, //
            userText: option.toString().trim(),
            questionsText: 'grammar-word-select',
        };

        //提交数据
        grammarSelectAnswers[item.questionsNumber] = item.userText;
        // console.log(grammarSelectAnswers);
    }

    // 词汇-初始化
    function renderQuestions() {
        questionContainer.innerHTML = '';
        let cardDataText = shuffleArray(cardData);
        let questionIndex = 1
        cardDataText.forEach(question => {
            // console.log(question);
            const card = createQuestionCard(question, questionIndex);
            questionIndex++
            questionContainer.appendChild(card);
        });
    }

    // 词汇-初始化
    function createQuestionCard(question, questionIndex) {
        const card = document.createElement('div');
        card.className = 'bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden card-effect';
        card.dataset.questionId = question.id;

        // 卡片内容
        card.innerHTML = `
            <div class="relative bg-neutral px-4 py-2 border-b border-gray-200">
              <span class="text-xl font-medium text-gray-700">${questionIndex}. ${question.title}</span>
              <span class="absolute top-2 right-2 bg-blue-500 text-white text-xs px-2 py-1 rounded">${question.appear}</span>
            </div>
            <div class="p-4">
            <!--<p class="text-xm font-medium mb-3 text-gray-800">${question.type}</p>-->
              <div class="space-y-2 cardSelectDivOptions" id="${question.title}-options"></div>
            </div>`;

        // 创建选项
        const optionsContainer = card.querySelector(`#${question.title}-options`);
        let optionItem = shuffleArray(question.options);
        optionItem.forEach((option, index) => {
            const optionEl = document.createElement('div');

            optionEl.id = 'word-select-' + questionIndex;
            optionEl.className = 'p-3 border relative border-gray-200 rounded text-xl option-hover cursor-pointer';

            optionEl.dataset.question = question.title;
            optionEl.dataset.correct = question.correct;

            // 选项内容（带A/B/C/D标识）
            optionEl.innerHTML = `
                  <div class="flex items-center ">
                    <div class="w-5 h-5 rounded border border-gray-300 mr-2 flex-shrink-0
                     flex items-center justify-center text-gray-500 text-xs">
                      ${String.fromCharCode(65 + index)}
                    </div><span class="text-xs">${option}</span>
                  </div>`;

            // 绑定点击事件
            optionEl.addEventListener('click', () => selectOption(optionEl, option));
            optionsContainer.appendChild(optionEl);
        });
        return card;
    }

    // 词汇-初始化
    function selectOption(optionEl, option) {
        const questionId = optionEl.dataset.question;

        // 清除同一题的其他选项选中状态
        document.querySelectorAll(`[data-question="${questionId}"]`).forEach(el => {
            // console.log(el);
            el.dataset.userSelectOption = option;
            el.classList.remove('option-selected');
            el.querySelector('div:first-child div:first-child')
                .classList.remove('text-white', 'border-primary');
            el.querySelector('div:first-child div:first-child')
                .classList.add('border-gray-300', 'text-gray-500');
        });
        // console.log(option);

        // 设置当前选项为选中状态
        optionEl.classList.add('option-selected');
        optionEl.querySelector('div:first-child div:first-child').classList.remove('border-gray-300');
        optionEl.querySelector('div:first-child div:first-child').classList.add('border-primary');

        //提交数据
        let item = {
            questionsNumber: optionEl.id.split('-')[2],
            score: 1,
            correctAnswer: 0, //
            correctText: optionEl.dataset.correct, //
            userText: option.toString().trim(),
            questionsText: 'word-select-english',
        };

        //提交数据
        if (!userAnswers.includes(questionId)) {
            userAnswers.push(questionId);
            userData.list.push(item);
        } else {
            userData.list = userData.list.filter(item => item.correctText !== optionEl.dataset.correct);
            userData.list.push(item);
        }
        console.log(userData);

        //记录正确率
        correctCollections.num5 = 0
        userAnswersSelect[questionId] = optionEl.dataset.correct === option;
        Object.values(userAnswersSelect).forEach((value) => {
            if (value) {
                correctCollections.num5++
            }
        })
        correctCollections.correct5 = parseInt((correctCollections.num5 * 5).toString());
        // console.log(correctCollections.num5);
    }

    //听力-单词
    function addWordListenContent() {
        // 1. 获取容器元素
        const inputContainer = document.getElementById('wordListenDataContainer');
        for (let i = 0; i < listenWordShuffle.length; i++) {
            // 创建外层容器（包裹序号和 input）
            const inputWrapper = document.createElement('div');
            inputWrapper.className = 'flex relative items-center gap-3'; // Tailwind 弹性布局，间距 3

            // 创建序号标签
            const label = document.createElement('span');
            label.className = 'w-16 text-center font-medium'; // 固定宽度，居中对齐
            label.textContent = `${i + 1}.`; // 序号从 1 开始

            // 创建 input 元素
            const input = document.createElement('input');
            // 设置 input 属性
            input.type = 'text'; // 文本类型
            input.correctText = listenWordShuffle[i]; // 文本类型
            input.name = `input-${i + 1}`; // 命名区分（如 input-1、input-2）
            input.id = `input-word-${i + 1}`; // ID 唯一
            input.placeholder = `请输入第 ${i + 1} 个内容`; // 提示文本
            input.addEventListener('focus', () => {
                handleColumnAudio(input.correctText)
            })
            // Tailwind 样式：全宽、边框、圆角、内边距
            input.className = 'wordInput w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500';

            // 3. 组装元素并添加到容器
            inputWrapper.appendChild(label);
            inputWrapper.appendChild(input);
            inputContainer.appendChild(inputWrapper);
            // console.log(input);
        }
    }

    //听力-短文
    function updateListenInput() {
        // 1. 获取容器元素
        const inputContainer = document.getElementById('inputContainer');

        for (let i = 0; i < 5; i++) {
            // 创建外层容器（包裹序号和 input）
            const inputWrapper = document.createElement('div');
            inputWrapper.className = 'flex relative items-center gap-3'; // Tailwind 弹性布局，间距 3

            // 创建序号标签
            const label = document.createElement('span');
            label.className = 'w-6 text-center font-medium'; // 固定宽度，居中对齐
            label.textContent = `${i + 1}.`; // 序号从 1 开始

            // 创建 input 元素
            const input = document.createElement('input');
            // 设置 input 属性
            input.type = 'text'; // 文本类型
            input.correctText = listenParagraphContext[i]; // 文本类型
            input.name = `input-${i + 1}`; // 命名区分（如 input-1、input-2）
            input.id = `input-${i + 1}`; // ID 唯一
            input.placeholder = `请输入第 ${i + 1} 个内容`; // 提示文本
            // Tailwind 样式：全宽、边框、圆角、内边距
            input.className = 'paraphraseInput w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500';

            // 3. 组装元素并添加到容器
            inputWrapper.appendChild(label);
            inputWrapper.appendChild(input);
            inputContainer.appendChild(inputWrapper);
        }
    }

    //阅读
    function updateReadingInput() {
        // 1. 获取容器元素
        const inputContainer = document.getElementById('readingInputContainer');

        for (let i = 0; i < 3; i++) {
            // 创建外层容器（包裹序号和 input）
            const inputWrapper = document.createElement('div');
            inputWrapper.className = 'flex relative items-center gap-3'; // Tailwind 弹性布局，间距 3

            // 创建序号标签
            const label = document.createElement('span');
            label.className = 'w-6 text-center font-medium'; // 固定宽度，居中对齐
            label.textContent = `${i + 4}.`; // 序号从 4 开始

            // 创建 input 元素
            const input = document.createElement('input');
            // 设置 input 属性
            input.type = 'text'; // 文本类型
            input.correctText = listenParagraphContext[i]; // 文本类型
            input.name = `input-${i + 1}`; // 命名区分（如 input-1、input-2）
            input.id = `input-${i + 1}`; // ID 唯一
            input.placeholder = `请输入第 ${i + 4} 个内容`; // 提示文本
            // Tailwind 样式：全宽、边框、圆角、内边距
            input.className = 'w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500';

            // 3. 组装元素并添加到容器
            inputWrapper.appendChild(label);
            inputWrapper.appendChild(input);
            inputContainer.appendChild(inputWrapper);
        }
    }

    // 计时器功能
    function startTimer() {
        let minutes = 40
        let seconds = 0;
        const timerElement = document.getElementById('timer');

        const interval = setInterval(() => {
            // 更新显示
            timerElement.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;

            // 时间减少
            if (seconds === 0) {
                if (minutes === 0) {
                    clearInterval(interval);
                    // 时间到自动提交
                    document.getElementById('submitBtn').click();
                    return;
                }
                minutes--;
                seconds = 59;
            } else {
                seconds--;
            }

            // 剩余5分钟时警告
            if (minutes < 5) {
                timerElement.classList.add('text-danger', 'animate-pulse');
            }
        }, 1000);
    }

    // 交卷功能
    const submitBtn = document.getElementById('submitBtn');
    const submitModal = document.getElementById('submitModal');
    const cancelSubmit = document.getElementById('cancelSubmit');
    const confirmSubmit = document.getElementById('confirmSubmit');
    const successModal = document.getElementById('successModal');
    const closeSuccess = document.getElementById('closeSuccess');

    submitBtn.addEventListener('click', () => {
        submitModal.classList.remove('hidden');
        // successModal.classList.remove('hidden');
    });

    cancelSubmit.addEventListener('click', () => {
        submitModal.classList.add('hidden');
    });

    confirmSubmit.addEventListener('click', () => {
        let check = getUserInputData()
        if (check) {
            getSubmitResultAll()
            submitModal.classList.add('hidden');
            successModal.classList.remove('hidden');
            initCollectCollections()
            // console.log(userData);
            submitData()
        } else {
            submitModal.classList.add('hidden');
        }
    });

    closeSuccess.addEventListener('click', () => {
        successModal.classList.add('hidden');

        document.querySelectorAll('.popup-container-hidden').forEach(item => {
            item.style.display = 'block';
        })
        //location.reload(); // 普通刷新（可能从缓存加载）
    });

    function getSubmitResult(id, rate, correct) {
        let elementById = document.getElementById(id);
        let num = id.substring(id.length - 1);
        let title = ''
        if (parseInt(num) === 2) {
            title = '听力-短文:'
        } else if (parseInt(num) === 3) {
            title = '阅读:'
        } else if (parseInt(num) === 4) {
            title = '听力-单词:'
        } else if (parseInt(num) === 1) {
            title = '语法-语句:'
        } else if (parseInt(num) === 5) {
            title = '词汇:'
        } else if (parseInt(num) === 6) {
            title = '语法-单词:'
        } else if (parseInt(num) === 7) {
            title = '听力-选择:'
        }
        elementById.innerHTML = title + "-正确个数:" + correct + "-正确率:" + rate + "%"
    }

    function initCollectCollections() {
        correctCollections = {}
    }

    function getSubmitResultAll() {
        //语法-语句-✅
        getSubmitResult("submitData1", correctCollections.correct1, correctCollections.num1 + '/5')
        //语法-单词-✅
        getSubmitResult("submitData6", correctCollections.correct6, correctCollections.num6 + '/10')
        //听力-短文-✅
        getSubmitResult("submitData2", correctCollections.correct2, correctCollections.num2 + '/5')
        //听力-选择-✅
        getSubmitResult("submitData7", correctCollections.correct7, correctCollections.num7 + '/5')
        //阅读-✅
        getSubmitResult("submitData3", correctCollections.correct3, correctCollections.num3 + '/6')
        //听力-单词-✅
        getSubmitResult("submitData4", correctCollections.correct4, correctCollections.num4 + '/10')
        //词汇-✅
        getSubmitResult("submitData5", correctCollections.correct5, correctCollections.num5 + '/20')
    }

    //提交数据到服务器
    function submitData() {
        // console.log(JSON.stringify(userData))
        // 发送 POST 请求
        fetch('http://1.92.74.42:8088/comprehensive/exam', {
            method: 'POST', // 指定 POST 方法
            headers: {
                'Content-Type': 'application/json', // 声明数据格式为 JSON
                // 可添加其他请求头，如认证信息
                // 'Authorization': 'Bearer token123'
            },
            body: JSON.stringify(userData) // 将数据转为 JSON 字符串
        }).then(response => {
            if (!response.ok) {
                throw new Error('提交失败');
            }
            return response.json(); // 解析后端返回的 JSON 响应
        }).then(() => {
            userData = {}
            selectQuestionValueList = []
        }).catch(() => {
            alert('提交失败，请重试');
        });
    }

    //判断用户输入是否完整
    function getUserInputData() {
        let name = document.getElementById('name').value;
        let campus = document.getElementById('campus').value;
        if (name === null || name === '') {
            alert('Please enter your name');
            return false;
        }
        if (campus === null || campus === '') {
            alert('Please enter your campus');
            return false;
        }
        userData.name = name;
        userData.campus = campus;
        userData.typeName = '挑战版';
        getUserAllInputData()
        return true;
    }

    //获取到用户的所有输入
    function getUserAllInputData() {
        //听力
        getUserListenAnswerWord('wordListenDataContainer', 'word listen and input')
        getUserListenAnswerData('inputContainer', 'Events during Kenton Festival')
        //语法-单词
        getUserInputGrammarWord()
        //阅读
        getUserReadingSelectData()
        getUserReadingAnswerData('readingInputContainer', 'reading')
        //写作
        getUserAnswerData('article', 'article', 30)
    }

    function test() {

    }

    //语法-单词
    function getUserInputGrammarWord() {
        //记录正确率
        correctCollections.num6 = 0
        let correctArray = []
        for (let i = 0; i < grammarWordContext.length; i++) {
            correctArray.push(grammarWordContext[i]['correct'])
        }
        // console.log(grammarWordShuffle);
        Object.values(grammarSelectAnswers).forEach(item => {
            if (correctArray.indexOf(item) !== -1) {
                correctCollections.num6++
            }
        })
        correctCollections.correct6 = parseInt((correctCollections.num6 * 10).toString());

        //保存用户数据
        Object.keys(grammarSelectAnswers).forEach(key => {
            // console.log(key + '--'+ grammarSelectAnswers[key] + '--'+ grammarWordShuffle[key - 1]['correct']);
            const inputInfo = {
                questionsNumber: key,
                correctText: '', //
                correctAnswer: grammarWordShuffle[key - 1]['correct'],
                score: 2,
                userText: '',
                userAnswer: grammarSelectAnswers[key],
                questionsText: grammarWordShuffle[key - 1]['title']
            };
            userData.list.push(inputInfo);
        })
        // console.log(correctCollections.num6);
    }

    //阅读-选择
    function getUserReadingSelectData() {
        let data = userReadingSelect
        // console.log(data)
        if (data.length === 0) {
            return
        }
        const keys = Object.keys(data);
        let correct = 0
        for (let i = 0; i < keys.length; i++) {
            const key = keys[i];
            let item = {
                questionsNumber: i + 1,
                score: 5,
                correctAnswer: readingCorrect[i], //
                userText: '',
                userAnswer: parseInt(userReadingSelect[key]),
                questionsText: 'List of Headings'
            };
            userData.list.push(item);
            if (item.correctAnswer === item.userAnswer) {
                correct++;
            }
        }
        correctCollections.num3 = correct
    }

    //写作
    function getUserAnswerData(id, title, score) {
        let paraphraseContent = document.getElementById(id).value
        let item = {
            questionsNumber: 1,
            score: score,
            correctAnswer: 0, //
            userAnswer: 0, //
            userText: paraphraseContent,
            questionsText: title
        };
        if (item.userText !== '') {
            userData.list.push(item);
        }
    }

    //阅读理解
    function getUserReadingAnswerData(id, title) {
        let inputGroup = document.getElementById(id)

        //选择 div 内所有 input（返回 NodeList 集合）
        const inputs = inputGroup.querySelectorAll('input');
        let correctNum = 0
        // console.log(correctCollections.num3);

        //遍历集合，收集值（支持 forEach/for 循环）
        inputs.forEach((input, index) => {
            // console.log(input);
            if (input !== null && input !== undefined) {
                // 获取 input 的关键信息：类型、占位符、输入值
                const inputInfo = {
                    questionsNumber: index + 4,
                    correctText: readingCorrect[index + 3], //
                    correctAnswer: 0,
                    score: 5,
                    userText: input.value.trim(),  // 输入值（去空格）
                    questionsText: title
                };
                if (inputInfo.correctText.toString().indexOf('/') === -1) {
                    if (inputInfo.correctText.toLowerCase() === inputInfo.userText.toLowerCase()) {
                        correctNum++;
                    }
                } else {
                    let correctArrays = inputInfo.correctText.toString().split('/');
                    // console.log(correctArrays);
                    if (correctArrays.includes(inputInfo.userText.toLowerCase())) {
                        correctNum++;
                    }
                }
                if (inputInfo.userText !== '') {
                    userData.list.push(inputInfo);
                }
            }
        });

        correctCollections.num3 = correctCollections.num3 + correctNum
        correctCollections.correct3 = parseInt((correctCollections.num3 * 100 / 6).toString());
    }

    //听力-短文
    function getUserListenAnswerData(id, title) {
        let inputGroup = document.getElementById(id)

        //选择 div 内所有 input（返回 NodeList 集合）
        const inputs = inputGroup.querySelectorAll('input', '.paraphraseInput');
        let correctNum = 0

        //遍历集合，收集值（支持 forEach/for 循环）
        inputs.forEach((input, index) => {
            // 获取 input 的关键信息：类型、占位符、输入值
            const inputInfo = {
                questionsNumber: index + 1,          // 序号（从1开始）
                correctText: input.correctText, //
                correctAnswer: 0,
                score: 2,
                userText: input.value.trim(),  // 输入值（去空格）
                questionsText: title
            };
            if (inputInfo.correctText.indexOf('/') === -1) {
                if (inputInfo.correctText.toLowerCase() === inputInfo.userText.toLowerCase()) {
                    correctNum++;
                }
            } else {
                let correctArrays = inputInfo.correctText.split('/');
                if (correctArrays.includes(inputInfo.userText.toLowerCase())) {
                    correctNum++;
                }
            }
            if (inputInfo.userText !== '') {
                userData.list.push(inputInfo);
            }
        });
        // console.log(userData.list)
        correctCollections.num2 = correctNum
        correctCollections.correct2 = parseInt((correctNum * 100 / inputs.length).toString());
    }

    //听力-单词
    function getUserListenAnswerWord(id, title) {
        let inputGroup = document.getElementById(id)

        // 2.1 选择 div 内所有 input（返回 NodeList 集合）
        const inputs = inputGroup.querySelectorAll('input', '.wordInput');
        // console.log(inputs.length)

        // 2.2 遍历集合，收集值（支持 forEach/for 循环）
        inputs.forEach((input, index) => {
            // 获取 input 的关键信息：类型、占位符、输入值
            const inputInfo = {
                questionsNumber: index + 1,          // 序号（从1开始）
                correctText: input.correctText, //
                correctAnswer: 0,
                score: 2,
                userText: input.value.trim(),  // 输入值（去空格）
                questionsText: title
            };
            // console.log(inputInfo);
            if (inputInfo.correctText.indexOf('/') === -1) {
                if (inputInfo.correctText.toLowerCase() === inputInfo.userText.toLowerCase()) {
                    correctCollections.num4++;
                }
            } else {
                let correctArrays = inputInfo.correctText.split('/');
                if (correctArrays.includes(inputInfo.userText.toLowerCase())) {
                    correctCollections.num4++;
                }
            }
            if (inputInfo.userText !== '') {
                userData.list.push(inputInfo);
            }
        });

        correctCollections.correct4 = parseInt((correctCollections.num4 * 10).toString());
    }

    //语法-句子
    document.querySelectorAll('input[name^="select"]').forEach(radio => {
        radio.addEventListener('change', function () {
            let selectedValue = getSelectedValue(this.name);
            let number = this.name.toString().substring(6);
            const inputInfo = {
                questionsNumber: number,          // 序号（从1开始）
                correctText: '', //
                correctAnswer: grammarSentenceCorrect[number - 1],
                score: 5,
                userText: '',
                userAnswer: selectedValue,
                questionsText: this.name
            };

            if (selectQuestionValueList.indexOf(this.name) === -1) {
                selectQuestionValueList.push(this.name);
                userData.list.push(inputInfo);
                if (inputInfo.correctAnswer === parseInt(inputInfo.userAnswer)) {
                    correctCollections.num1++;
                }
            } else {
                userData.list = userData.list.filter(item => item.questionsText !== this.name);
                userData.list.push(inputInfo);
            }

            correctCollections.correct1 = parseInt((correctCollections.num1 * 20).toString());
            // console.log(userData.list);
        });
    });

    //听力-选择
    document.querySelectorAll('input[name^="listen_select"]').forEach(radio => {
        radio.addEventListener('change', function () {
            let selectedValue = getSelectedValue(this.name);
            let number = this.name.toString().substring(13);
            const inputInfo = {
                questionsNumber: number,          // 序号（从1开始）
                correctText: '', //
                correctAnswer: listenSelectContext[number - 1],
                score: 2,
                userText: '',
                userAnswer: selectedValue,
                questionsText: this.name
            };

            if (selectQuestionValueList.indexOf(this.name) === -1) {
                selectQuestionValueList.push(this.name);
                userData.list.push(inputInfo);
                if (inputInfo.correctAnswer === parseInt(inputInfo.userAnswer)) {
                    correctCollections.num7++;
                }
            } else {
                userData.list = userData.list.filter(item => item.questionsText !== this.name);
                userData.list.push(inputInfo);
            }

            correctCollections.correct7 = parseInt((correctCollections.num7 * 20).toString());
            // console.log(userData.list);
        });
    });

    //检查与判卷
    document.querySelectorAll('.popup-container-hidden').forEach(item => {
        item.style.display = 'none';
    })

    // 方法：根据name属性获取选中的值
    function getSelectedValue(name) {
        // 关键：通过模板字符串将参数拼接到选择器中
        const selected = document.querySelector(`input[name="${name}"]:checked`);
        return selected ? selected.value : "none";
    }

    // 按钮点击事件
    playButton.addEventListener('click', playOnce);
    playButton2.addEventListener('click', playOnce2);

    function playOnce() {
        document.getElementById('audioPlayer').play()
        playButton.style.display = "none"; // 完全隐藏，不占空间
    }

    function playOnce2() {
        document.getElementById('audioPlayer2').play()
        playButton2.style.display = "none"; // 完全隐藏，不占空间
    }

    function handleColumnAudio(name) {
        // console.log(name);
        window.speechSynthesis.resume();
        const speech = new SpeechSynthesisUtterance();
        speech.text = name;
        speech.lang = "en-US";
        speech.volume = 1;
        speech.rate = 1;
        speech.pitch = 1;
        window.speechSynthesis.speak(speech);
    }

    //选择框初始化
    function selectInputInit() {
        const basicSelect = document.querySelectorAll('.select');
        basicSelect.forEach((element, index) => {
            element.addEventListener('change', function () {
                // console.log( index + '选择了：', this.value);
                userReadingSelect[index + 1] = this.value;
            });
        })
    }

    // 页面加载完成后启动计时器
    window.addEventListener('DOMContentLoaded', () => {
        selectInputInit()
        grammarWordSelectInit();
        renderQuestions()
        addWordListenContent()
        updateListenInput()
        updateReadingInput()
        startTimer();
    });
</script>
</body>
</html>
